// 添加用户
$("#userForm").on('submit', function () {
  var formData = $(this).serialize();
  $.ajax({
    type: 'post',
    url: '/users',
    data: formData,
    success: function (response) {
      location.reload();
    },
    error: function (){
      alert('用户添加失败')
    }
  })
  return false;
});

// 上传头像
$("#modifyBox").on('change', '#avatar', function () {
  const formData = new FormData();
  formData.append('avatar', this.files[0]);
  $.ajax({
    type: 'post',
    url: '/upload',
    data: formData,
    // 告诉$.ajax方法不要解析请求参数，因为要以二进制上传
    processData: false,
    // 告诉$.ajax方法不要设置请求参数的类型
    contentType: false,
    success: function (response) {
      // 实现头像预览功能
      $("#preview").attr('src', response[0].avatar);
      $("#hiddenAvatar").val(response[0].avatar);
    }
  })
})

// 向服务器端发送请求，获取用户列表
$.ajax({
  type: 'get',
  url: '/users',
  success: function (response) {
    const html = template('userTpl', {
      data: response
    });
    $("#userBox").html(html);
  }
})

// 加载用户数据来修改
$("#userBox").on('click', '.edit', function () {
  const id = $(this).attr("data-id");
  $.ajax({
    type: 'get',
    url: '/users/'+id,
    success: function (response) {
      const html = template('modifyTpl', response);
      $("#modifyBox").html(html);
    }
  })
})

// 修改用户信息
$("#modifyBox").on('submit', '#modifyForm', function () {
  const formData = $(this).serialize();
  const id = $(this).attr('data-id');
  $.ajax({
    type: 'put',
    url: '/users/' + id,
    data: formData,
    success: function (response) {
      location.reload();
    }
  })
  return false;
})

// 删除用户
$("#userBox").on('click', '.delete', function () {
  if(confirm("您真的要删除该用户吗？")){
    const id = $(this).attr('data-id');
    $.ajax({
      type: 'delete',
      url: '/users/' + id,
      success: function (response) {
        location.reload();
      }
    })
  }
})

const selectAll = $("#selectAll");
const deleteMany = $("#deleteMany");
// 全选
selectAll.on('change', function () {
  const check = $(this).prop('checked');
  if(check) {
    deleteMany.show();
  }else {
    deleteMany.hide();
  }
  $("#userBox").find('input').prop('checked', check);
});

$("#userBox").on('change', '.userStatus', function () {
  const inputs = $("#userBox").find('input');
  const checkedNum = inputs.filter(':checked').length;
  if(checkedNum > 0) {
    $("#deleteMany").show();
  }else {
    $("#deleteMany").hide();
  }
  if(inputs.length == checkedNum){
    selectAll.prop('checked', true);
  }else{
    selectAll.prop('checked', false);
  }
})

// 批量删除按钮点击事件
deleteMany.on('click', function () {
  if(confirm('确定要进行删除操作吗')){
    const ids = [];
    const checkedUser = $("#userBox").find("input").filter(":checked")
    checkedUser.each(function (index, element) {
      ids.push($(element).attr("data-id"));
    });
    $.ajax({
      type: 'delete',
      url: '/users/' + ids.join('-'),
      success: function () {
        location.reload();
      },
      error: function () {
        alert('删除失败');
      }
    })
  }
})